<template>
  <div class="header-button">
    <div class="flex">
      <div>
        <ProForm ref="form" :config="searchConfig" :echo="echo"></ProForm>
      </div>
      <div>
        <el-radio-group v-model="radio" class="ml-4" @change="radioChange">
          <el-radio label="year" border>年</el-radio>
          <el-radio label="month" border>月</el-radio>
          <el-radio label="week" border>星期</el-radio>
          <el-radio label="daterange" border>日</el-radio>
        </el-radio-group>
      </div>
      <div>
        <el-button-group
          class="ml-4"
          v-if="controlPosition && controlPosition.includes('position')"
        >
          <el-button type="primary" @click="headerButtonSelect">{{
            positionName || "請選擇"
          }}</el-button>
          <el-button type="primary" icon="Delete" @click="headerButtonDel" />
          <el-button type="primary" icon="Search" @click="headerButtonSearch" />
        </el-button-group>
      </div>
      <div class="ml-4">
        <el-button
          v-for="item in control"
          :key="item"
          :type="controlAttr[item].type"
          :icon="controlAttr[item].icon"
          :disabled="disabled.includes(item) && delsable"
          @click="onControlClick(item)"
          circle
          class="button"
        ></el-button>
      </div>
      <slot name="add"></slot>
      <slot name="DataImport"></slot>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import ProForm from "@/components/ProForm/index.vue";
import { controlAttr, controlText } from "./config.js";
import { dayjs } from "element-plus";
const props = defineProps({
  searchConfig: Object,
  disabled: Object,
  control: Object,
  controlPosition: Object,
  delsable: Boolean,
  positionName: [Object, String],
});
console.log(props.searchConfig.formItems);
const onControlClick = (type) => {
  switch (type) {
    case "search":
      searchHeader();
      break;
    case "dels":
      delsHeader();

      break;
    case "add":
      addHeader();
      break;
  }
};
const form = ref(null);
const searchValue = ref({});
const searchHeader = () => {
  form.value.submit((e) => {
    searchValue.value = JSON.parse(JSON.stringify(e));
    const endTime = ref("");
    const arr = reactive([]);
    let startTime = searchValue.value.time;
  if (!searchValue.value.time) {
    searchValue.value.time = ''
  }else{
       if (radio.value == "year" && searchValue.value.time !== '' ) {
      endTime.value = dayjs(searchValue.value.time).add(1, "year").format("YYYY-MM-DD");
      searchValue.value.time = arr.concat(startTime, endTime.value);
    }else 
    if (radio.value == "month" && searchValue.value.time !== '' ) {
      endTime.value = dayjs(searchValue.value.time).add(1, "month").format("YYYY-MM-DD");
      searchValue.value.time = arr.concat(startTime, endTime.value);
    }else
    if (radio.value == "week" && searchValue.value.time !== '' ||!searchValue.value.time) {
      endTime.value = dayjs(searchValue.value.time).add(1, "week").format("YYYY-MM-DD");
      searchValue.value.time = arr.concat(startTime, endTime.value);
    }else
    if (radio.value == "daterange" && searchValue.value.time !== ''  ) {
      // searchValue.value.time
    }else{ 
      searchValue.value.time = ''
      }
  }
 
    emit("searchHeader", searchValue.value, radio.value);
  });
};

const delsHeader = () => {
  emit("delsHeader");
};
const addHeader = () => {
  emit("addHeader");
};

const emit = defineEmits([
  "headerButtonDel",
  "headerButtonSearch",
  "headerButtonSelect",
  "searchHeader",
  "delsHeader",
  "addHeader",
]);
const headerButtonSelect = () => {
  emit("headerButtonSelect");
};
const headerButtonDel = () => {
  emit("headerButtonDel");
};
const headerButtonSearch = () => {
  emit("headerButtonSearch");
};
const echo = ref([])
const radio = ref("year");
const radioChange = () => {
  props.searchConfig.formItems.map((e) => {
    if (e.props.prop == "time") {
      e.elProps.type = radio.value;
      switch (radio.value) {
        case "year":
          echo.value = {time:''}
          e.elProps.placeholder = "請選擇年份";
          e.elProps.format = "YYYY";
          e.elProps.valueFormat = "YYYY-MM-DD";
          break;
        case "month":
           echo.value = {time:''}
          e.elProps.placeholder = "請選擇月份";
          e.elProps.format = "YYYY-MM";
          e.elProps.valueFormat = "YYYY-MM-DD";
          break;
        case "week":
           echo.value = {time:''}
          e.elProps.placeholder = "請選擇星期";
          e.elProps.format = "[Week] ww";
          e.elProps.valueFormat = "YYYY-MM-DD";
          break;
        case "daterange":
                 echo.value = {time:''}
          e.elProps.format = "YYYY-MM-DD";
          e.elProps.valueFormat = "YYYY-MM-DD";
          break;
      }
      console.log(props.searchConfig.formItems);
      // e.elProps.placeholder = radio.value == 'year' ? '请选择年份' : radio.value == 'month' ? '请选择年份'
    }
  });
};
</script>

<style lang='less'  scoped>
.header-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  background: #ffffff;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 30px;
}
.header-button:hover {
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.3);
}
</style>